<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色信息维护</title>
    <style>
        html, body {
            width: 100%;
            overflow-y:hidden;
        }
        .modal-backdrop {
            opacity: 0 !important;
            filter: alpha(opacity=0) !important;
        }
    </style>
    <script src="../../js/jquery-2.1.1.min.js"></script>
    <link rel="stylesheet" href="../../static/css/style.css">

    <script src="../../js/jquery-2.1.1.min.js"></script>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/bootstrap-table.min.css">
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="../../static/js/global.min.js"></script>
    <script src="../../js/bootstrap-table.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.21.0/locale/bootstrap-table-zh-CN.js"></script>
    <script>
        //渲染表格
        $(function () {
            $('#table').bootstrapTable({
                //请求方式  get请求中文会乱码，建议使用post请求
                method: 'post',
                //请求头部的设置
                contentType: 'application/json',
                //路径
                url: '/queryRoleAll.action',
                //设置交替行样式
                striped: true,
                //初始显示页号
                pageNumber: 1,
                //设置表格高度
                height: 600,
                //是否显示分页
                pagination: true,
                //设置是服务端分页还是客户端分页
                sidePagination: 'server',
                //页大小
                pageSize:4,
                //分页列表
                pageList:[4,8],
                //上传到服务端的参数
                queryParams: function (params) {
                    return {
                        // 计算页号(当前页)
                        pageNum: (params.offset / params.limit) + 1,
                        // 计算页大小
                        pageSize: params.limit,

                    };
                },
                // 定义列名
                columns: [
                    {title: '选择', field: 'id', align: 'center',formatter: function (value,row,index){
                            return "<input type='radio' class=\"btn btn-success\" name='radio' value="+value+">";
                        }},
                    {title: '编号', field: 'id', align: 'center'},
                    {title: '角色', field: 'name', align: 'center'},
                    {title: '角色说明', field: 'descn', align: 'center'},
                    {title: '操作', field: 'id', align: 'center',
                        formatter: function (value, row, index) {
                            var btn1 = "<button class='btn btn-primary' data-toggle='modal' onclick='update("+JSON.stringify(row)+")'>编辑</button>";
                            var btn2 = "<button class='btn btn-warning' onclick='remove("+value+")'>删除</button>";
                            return btn1 + "&emsp;" + btn2;
                        },
                    }
                ]
            });
        })

        var id = 0;//授权目标编号

        $(function (){
            //授权并回收菜单
            $("#Authorize_and_recycle_menus").click(function () {
                $("#table input[type='radio']").each(function () {
                    if($(this).prop('checked')){
                        id = $(this).val();
                    }
                })
                if(id > 0){
                    //清空数据
                    $('#ul').html("");
                    $('#menusTable').html("");
                    $(".nav-tabs input[type='checkbox']").each(function () {
                        $(this).val("");
                        $(this).prop("checked",false);
                    });
                    $.ajax({
                        type: 'POST',
                        async:false,
                        url: '/searchQueryMenuAll.action',
                        success: function (userMenus) {
                            //异步查询授权人角色具有的菜单
                            $.ajax({
                                type: 'POST',
                                url:'/searchQueryUserIdMenu.action',
                                success:function (userMenu){
                                    //异步查询 角色具有的菜单
                                    $.ajax({
                                        type: 'POST',
                                        url:'/searchQueryByIdMenu.action',
                                        data:'id='+id,
                                        success:function (roleMenu){

                                            for(var s in userMenus){
                                                if(s==="1"){$('#product').children("input").val(s);$('#product').show();}
                                                if(s==="16"){$('#produce').children("input").val(s);$('#produce').show();}
                                                if(s==="39"){$('#stock').children("input").val(s);$('#stock').show();}
                                                if(s==="66"){$('#system').children("input").val(s);$('#system').show();}
                                                for(var i in userMenus[s]){
                                                    $.each(userMenu,function (index,u){
                                                        if(u.name==i){
                                                            $("#ul").append("<li class=\"nav-item col a"+s+" b"+u.id+"\">" +
                                                                "<input type=\"checkbox\" class=\"form-check-input ckeck\" value="+u.id+">" +
                                                                "<h5 class=\"nav-link\" data-bs-toggle=\"tab\">"+i+"</h5>" +
                                                                "</li>");
                                                            $.each(userMenus,function (index,menus){
                                                                $.each(menus[i],function (e,menu){
                                                                    $('#menusTable').append(
                                                                        "<tr style='height: 50px;font-size: 1.3em' class=b"+u.id+">" +
                                                                            "<td><input type=\"checkbox\" value="+menu.id+"></td>" +
                                                                            "<td style=\"font-weight: bold\">"+menu.id+"</td>" +
                                                                            "<td style=\"font-weight: bold\">"+menu.name+"</td>" +
                                                                        "</tr>"
                                                                    );
                                                                })
                                                            })
                                                        }
                                                    })
                                                }
                                            }

                                            $("#menuModal input[type='checkbox']").each(function () {
                                                if(roleMenu.userTagIds.indexOf(","+$(this).val()+",")>-1){
                                                    $(this).prop("checked",true);
                                                }
                                            });

                                            //打开模态框
                                            $('#menuModal').modal("show");
                                            //隐藏
                                            $("#menusTop").hide();
                                            $("#menusTable tr").each(function (){
                                                $(this).hide();
                                            });

                                            $(".nav-tabs>li input[type='checkbox']").each(function (){
                                                $($(this)).click(function (){
                                                    if($(this).prop("checked")){
                                                        $('.a'+$(this).val()).each(function (){
                                                            $(this).children().prop("checked","checked");
                                                            let cls3 = $(this).attr("class").substring($(this).attr("class").indexOf("b"));
                                                                if($(this).children().prop("checked")){
                                                                    $("."+cls3+" input[type='checkbox']").each(function (){
                                                                        $(this).prop("checked","checked");
                                                                    });
                                                                }else{
                                                                    $("."+cls3+" input[type='checkbox']").each(function (){
                                                                        $(this).prop("checked",false);
                                                                    });
                                                                }
                                                        })
                                                    }else{
                                                        $('.a'+$(this).val()).each(function (){
                                                            $(this).children().prop("checked",false);
                                                            let cls3 = $(this).attr("class").substring($(this).attr("class").indexOf("b"));
                                                            if($(this).children().prop("checked")){
                                                                $("."+cls3+" input[type='checkbox']").each(function (){
                                                                    $(this).prop("checked","checked");
                                                                });
                                                            }else{
                                                                $("."+cls3+" input[type='checkbox']").each(function (){
                                                                    $(this).prop("checked",false);
                                                                });
                                                            }
                                                        })
                                                    }
                                                });
                                            })

                                            $('#ul>li').each(function (){
                                                $(this).hide();
                                                var cls1 = $(this).attr("class").substring($(this).attr("class").indexOf("b"));
                                                $("."+cls1).click(function (){
                                                    $("#menusTable tr").each(function (){
                                                        $(this).hide();
                                                    });
                                                    var cls2 = $(this).attr("class").substring($(this).attr("class").indexOf("b"));
                                                    $("#menusTop").show();
                                                    $("."+cls2).show();
                                                })
                                            })
                                            $("#ul>li>input[type='checkbox']").each(function (){
                                                $($(this)).click(function (){
                                                    let num = $(this).parent().attr("class").substring($(this).parent().attr("class").lastIndexOf("a")+1,$(this).parent().attr("class").indexOf("b"))+"a";
                                                    $(".nav-tabs li input[type='checkbox']").each(function (){
                                                        let value =$(this).val();
                                                        if(value+' a'==num){
                                                            $(this).prop("checked","checked");
                                                        }
                                                    })
                                                    if($(this).prop("checked")){
                                                        $("#menusTable ."+$(this).parent().attr("class").substring($(this).parent().attr("class").lastIndexOf("b"))).each(function (){
                                                           $(this).children().children().prop("checked","checked");
                                                        });
                                                    }else{
                                                        $("#menusTable ."+$(this).parent().attr("class").substring($(this).parent().attr("class").lastIndexOf("b"))).each(function (){
                                                            $(this).children().children().prop("checked",false);
                                                        });
                                                    }

                                                });
                                            })

                                            //tr
                                            $("#menusTable tr input[type='checkbox']").each(function (){
                                                $(this).click(function (){
                                                    if($(this).prop("checked")){
                                                        $("#ul ."+$(this).parent().parent().attr("class")).children().prop("checked","checked");
                                                        let v =$("#ul ."+$(this).parent().parent().attr("class")).attr("class").substring($("#ul ."+$(this).parent().parent().attr("class")).attr("class").lastIndexOf("a")+1,$("#ul ."+$(this).parent().parent().attr("class")).attr("class").lastIndexOf("b"))+"a";
                                                        $(".nav-tabs li input[type='checkbox']").each(function (){
                                                            let val =$(this).val();
                                                            if(val+' a'==v){
                                                                $(this).prop("checked","checked");
                                                            }
                                                        })
                                                    }
                                                });
                                            })
                                        }
                                    })
                                }
                            })
                        }
                    })

                }else{
                    alert("请选择需要授权并回收菜单角色！！！");
                }
            })
        })

        $(function (){
            //产品设计
            $('#product').click(function (){
                $('.a1').show();
                $('.a16').hide();
                $('.a39').hide();
                $('.a66').hide();
                $("#menusTop").hide();
                $("#menusTable tr").each(function (){
                    $(this).hide();
                });
            });
            //生产管理
            $('#produce').click(function (){
                $('.a1').hide();
                $('.a16').show();
                $('.a39').hide();
                $('.a66').hide();
                $("#menusTop").hide();
                $("#menusTable tr").each(function (){
                    $(this).hide();
                });
            });
            //库存管理
            $('#stock').click(function (){
                $('.a1').hide();
                $('.a16').hide();
                $('.a39').show();
                $('.a66').hide();
                $("#menusTop").hide();
                $("#menusTable tr").each(function (){
                    $(this).hide();
                });
            });
            //系统安全
            $('#system').click(function (){
                $('.a1').hide();
                $('.a16').hide();
                $('.a39').hide();
                $('.a66').show();
                $("#menusTop").hide();
                $("#menusTable tr").each(function (){
                    $(this).hide();
                });
            });

            $('#menuCheck').click(function (){
                var check = "";
                var nocheck = "";
                $("#menuModal input[type='checkbox']").each(function (){
                    if($(this).prop('checked')){
                        check+="&check="+$(this).val();
                    }else{
                        nocheck+="&nocheck="+$(this).val();
                    }
                });
                $.ajax({
                    type: 'POST',
                    url:'/AuthorizeOrRecycleMenus.action',
                    data:'id='+id+check+nocheck,
                    success:function (resultData){
                        if(resultData===0){
                            $('#exampleModal').modal("hide");
                            alert("成功操作一条数据");
                        }else {
                            alert("操作一条数据失败");
                        }
                    }
                })
            });
        })
        //添加角色
        $(function (){
            $('#save').click(function (){
                if($("#name").val()==""){
                    alert("角色名称不能为空");
                }else if($("#descn").val()==""){
                    alert("角色描述不能为空");
                }else{
                    let roleObj = {
                        name:$("#name").val(),
                        descn:$("#descn").val()
                    }
                    $.ajax({
                        type:'POST',
                        contentType: 'application/json;charset=utf-8',
                        url:'/saveRole.action',
                        data:JSON.stringify(roleObj),
                        success:function (resultData){
                            if(resultData>0){
                                $('#basicModal').modal("hide");
                                alert("成功操作一条数据");
                                $("table").bootstrapTable('refresh');
                            }else {
                                alert("操作一条数据失败");
                            }
                        }
                    })
                }

            });
        })
    </script>
</head>
<body>
<div style="width: 100%;display: flex;justify-content: end">
    <button style="margin-right: 10px" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#basicModal">添加角色</button>
    <button id="Authorize_and_recycle_menus" type="button" class="btn btn-primary">授权并回收菜单</button>
</div>
<table id="table"></table>

    <!--授权并回收菜单-->
<div class="modal fade bd-example-modal-lg" id="menuModal" tabindex="-1" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="height: 550px">
            <div class="modal-header">
                <h5 class="modal-title">授权并回收菜单</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal">
                </button>
            </div>

            <div class="modal-body">

                <div class="card-tabs row">
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item col" id="product" style="display: none">
                            <input type="checkbox" class="form-check-input">
                            <h4 class="nav-link" data-bs-toggle="tab" style="text-align: center;">
                                产品设计
                            </h4>
                        </li>
                        <li class="nav-item col" id="produce" style="display: none">
                            <input type="checkbox" class="form-check-input">
                            <h4 class="nav-link " data-bs-toggle="tab" style="text-align: center;">
                                生产管理
                            </h4>
                        </li>
                        <li class="nav-item col" id="stock" style="display: none">
                            <input type="checkbox" class="form-check-input">
                            <h4 class="nav-link active" data-bs-toggle="tab" style="text-align: center;">
                                库存管理
                            </h4>
                        </li>
                        <li class="nav-item col" id="system" style="display: none">
                            <input type="checkbox" class="form-check-input">
                            <h4 class="nav-link" data-bs-toggle="tab" style="text-align: center;">
                                系统安全
                            </h4>
                        </li>
                    </ul>
                </div>


                <div class="row" style="margin-top: 40px;">
                    <div class="card-tabs col-4">
                        <ul id="ul" class="nav" role="tablist" style="display: flex;flex-direction: column;">

                        </ul>
                    </div>

                    <div class="col-8">
                        <table class="table table-bordered">
                            <thead id="menusTop">
                            <tr>
                                <th style="font-weight: bold">选项</th>
                                <th style="font-weight: bold">编号</th>
                                <th style="font-weight: bold">菜单名称</th>
                            </tr>
                            </thead>
                            <tbody id="menusTable">

                            </tbody>
                        </table>
                    </div>

                </div>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-danger light" data-bs-dismiss="modal">关闭</button>
                <button id="menuCheck" type="button" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>

<!--添加角色-->

<div class="modal fade" id="basicModal" style="display: none;" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" style="width: 100%;text-align: center">新增角色</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal">
                </button>
            </div>
                <div class="modal-body">
                    <div class="input-group mb-3">
                        <span class="input-group-text">角色名称</span>
                        <div class="form-file">
                            <input type="text" id="name" class="form-control">
                        </div>
                    </div>
                    <div class="input-group mb-3">
                        <span class="input-group-text">描述</span>
                        <div class="form-file">
                            <input type="text" id="descn" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger light" data-bs-dismiss="modal">Close</button>
                    <button type="button" id="save" class="btn btn-primary">Save changes</button>
                </div>
        </div>
    </div>
</div>


</body>
</html>